<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function doAdd(){
            // 1.创建新元素
            var li=document.createElement("li");
            // 2.创建文本内容
            var txt=document.createTextNode("itany04");
            //3.将文本添加到li中去
            li.appendChild(txt);
            // 4.设置属性
            li.setAttribute("class","xixi");
            //5.找到li的父元素
            var ul=document.getElementById("myul");
            //6.将li添加到ul中去,追加在末尾
            ul.appendChild(li);

        }
        function doAddTr(){
            //1.创建行元素
            var tr=document.createElement("tr");
            // 2.循环创建td元素
            for(var i=1;i<=5;i++){
                var td=document.createElement("td");
                //创建文本元素
                // var txt=document.createTextNode("td"+i);//通用方式
                //将文本添加到td中
                // td.appendChild(txt);
                td.innerHTML="td"+i;//HTML特有的，只能在HTML中使用

                //将td添加到tr中去
                tr.appendChild(td);
            }
            // tr.setAttribute("align","center");//通用方式
            tr.align="center";//HTML特有的，只能在HTML中使用

            //找到tr的父元素
            var tb=document.getElementById("tb");
            tb.appendChild(tr);
        }
        function doElement(){

            //获取tr的DOM对象
            var tr=document.getElementById("mytr");
            console.log("节点类型："+tr.nodeType);
            console.log("节点名称："+tr.nodeName);

            //获取元素的父节点
            var parent=tr.parentNode;
            // console.log(parent);

            //获取元素的子节点的集合
            var children=tr.children;//集合
            // console.log(children);
            for(var i=0;i<children.length;i++){
                console.log(children[i]);
            }

            //获取元素的第一个子节点
            var first=tr.firstElementChild;
            console.log(first);

            //获取元素的最后一个子节点
            var last=tr.lastElementChild;
            console.log(last);


            var myli=document.getElementById("myli");
            //获取与当前元素同级别的前一个元素
            var previous=myli.previousElementSibling;
            console.log(previous);

            var next=myli.nextElementSibling;
            console.log(next);


            //获取节点属性的集合
            var attrs=tr.attributes;//集合
            for(var i=0;i<attrs.length;i++){
                // console.log(attrs[i]);//对应的属性和值
                console.log("属性名："+attrs[i].name+"，属性值："+attrs[i].value);//属性节点.name    属性节点.value，从而获取属性的名称和值
                // console.log("节点的类型："+attrs[i].nodeType);
                // console.log("节点的名称："+attrs[i].nodeName);

            }
            


        }

        function doLi(){
            // var lis=document.getElementsByTagName("li");//根据标签名获取li的集合
            // console.log(lis);

            //想要获取myul2中的li
            // var lis=window.document.querySelectorAll("#myul2>li");
            // console.log(lis);

            //获取myul2中的li
            var myul2=document.getElementById("myul2");//获取myul2的DOM对象

            // DOM对象.getElementsByTagName
            //在指定元素内部根据标签名去查找
            var lis=myul2.getElementsByTagName("li");//不仅仅是document对象具有此方法，DOM对象同样具有
            console.log(lis);
        }


    </script>
</head>
<body>
    <input type="button" value="添加一行" onclick="doAdd()">
    <input type="button" value="为表格添加一行" onclick="doAddTr()">
    <input type="button" value="获取元素" onclick="doElement()">
    <input type="button" value="获取li" onclick="doLi()">
    <ul id="myul">
        <li>itany01</li>
        <li id="myli">itany02</li>
        <li>itany03</li>
    </ul>
    <!-- table>(thead>tr>th{th$$}*5)+tbody>(tr>td{td$$}*5)*3 -->
    <table border="1" width="500">
        <thead>
            <tr id="mytr" name="heihei">
                <th>th01</th>
                <th>th02</th>
                <th>th03</th>
                <th>th04</th>
                <th>th05</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td>td01</td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
            <tr>
                <td>td01</td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
            <tr>
                <td>td01</td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
                <td>td05</td>
            </tr>
        </tbody>
    </table>
    <ul id="myul2">
        <li>li01</li>
        <li>li02</li>
        <li>li03</li>
        <li>li04</li>
        <li>li05</li>
    </ul>

    
</body>
</html>